<template lang="pug">
.swiper-container(v-if="show")
  swiper(:options="swiperOption")
    swiper-slide(v-for="item in list",:key="item.id",@click="to4Page(item)")
      a(:href="item.linkUrl")
        img.swiper-lazy(:data-src="item.picUrl | imgUrl")
    .swiper-pagination(slot="pagination")
</template>
<script>
import { Swiper } from 'vux'
import * as domains from '@/config/env.js'
import { routeTo } from '@/config/utils'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  props: ['cdata'],
  data() {
    return {
      list: [],
      imgIndex: 0,
      show: true,
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        lazyLoading : true,
        lazyLoadingInPrevNext : true,
        autoplay: 3000,
        loop:true,
        autoplayDisableOnInteraction : false,
      }
    }
  },
  created() {
    if (!this.cdata[0].tag) {
      this.show = false
      return
    }
    if (this.cdata[0].tag.length == 0) {
      this.show = false
      return
    }
    this.setList()
  },
  components: {
    swiper,
    swiperSlide
  },
  methods: {
    setList() {
      this.list = this.cdata[0].tag
    }
  }
}
</script>

<style lang="scss">
@import './tool.scss';
.swiper-container {
  width: 100%;
  height: _(347);
  img {
    width: 100%;
    height: 100%;
  }
  .swiper-pagination {
    text-align: right;
    padding-right: _(28);
    .swiper-pagination-bullet {
      width: 6px;
      height: 6px;
      border-radius: 100%;
      margin: 0 3px !important;
      background-color: #d0cdd1;
      opacity:1;
    }
    .swiper-pagination-bullet-active {
      background-color: #fff;
    }
  }
}

</style>
